<template>
  <div class="home">
    <div>
      {{ msg }}----
      {{ age + 1 > 18 ? '成年' : '未成年' }}
      {{ say() }}
    </div>
    <h1 @click="run()">珠海 广州 中山 东莞</h1>
    <h1>{{ allName }}</h1>
    <input type="text" v-model="obj.name" />
    <h1>{{ obj.name }}</h1>
    <heck></heck>
  </div>
</template>
<script>
export default {
  name: 'vue-base',
  data () {
    //vue组件的数据
    return {
      msg: '消息',
      firstName: '李',
      lastname: '小龙',
      age: 18,
      obj: {
        name: '阿三',
        age: 50
      },
      arr: ['美的', '海尔', '格力']
    }
  },
  // 父传子参数的设置
  props: ['sa1', 'username', 'list'],
  methods: {
    //vue组件的函数
    say () {
      return '过年好'
    },
    run () {
      this.say()
      console.log(this.msg)
      this.allName = '王 德发'
      this.msg = '有内鬼 停止交易'
      this.obj.name = '安培'
    }
  },
  computed: {
    //计算属性  处理vue组件data的数据 或vuex中的数据
    // methods 处理数据 页面重新渲染等 都会触发
    // 计算属性处理数据  性能好 依赖缓存 只有依赖的数据发生变化 才会从新计算
    myage () {
      return this.age > 18 ? '成年' : '未成年'
    },
    myarr () {
      let newARR = this.arr.map(item => {
        return item + '品牌'
      })
      return newARR
    },
    allName: {
      get () {
        return this.firstName + this.lastname
      },
      set (val) {
        console.log(val)
        var arr = val.split(' ')
        console.log(arr)
        this.firstName = arr[0]
        this.lastname = arr[1]
      }
    }
  },
  watch: {
    //监听器 监听 vue的data数据或计算属性或props 或 路由变化
    msg (newVal, oldVal) {
      console.log(newVal, oldVal)
    },
    // 监听计算属性的变化
    allName (newVal, oldVal) {
      console.log(newVal, oldVal)
    },
    // 监听对象的变化
    obj: {
      handler (newVal, oldVal) {
        //oldVal ！！！！！
        console.log(newVal, oldVal)
      },
      immediate: true, //进入组件就开始监听
      deep: true //深度监听
    }
  }
}
</script>
